<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>AMIS 6.1.0 实时编辑器</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/amis@6.12/sdk/sdk.css">
</head>
<body>
    <div id="root"></div>
    <script src="https://cdn.jsdelivr.net/npm/amis@6.12/sdk/sdk.js"></script>
</body>
<script type="text/javascript">
    const amisJSON = {
        "type": "page",
        "title": "AMIS 配置编辑器 (v6.1.0)",
        "body": [
            {
                "type": "container",
                "style": {
                    "display": "flex",
                    "height": "100vh"
                },
                "body": [
                    {
                        "type": "editor",
                        "name": "configInput",
                        "language": "json",
                        "placeholder": "输入 JSON 配置",
                        "size": "lg",
                        "style": {
                            "flex": 1,
                            "padding": "20px",
                            "background": "#f5f5f5"
                        }
                    },
                    {
                        "type": "json",
                        "name": "preview",
                        "placeholder": "预览将在此处显示",
                        "style": {
                            "flex": 1,
                            "padding": "20px",
                            "borderLeft": "1px solid #ddd",
                            "overflow": "auto"
                        }
                    }
                ]
            }
        ],
        "data": {
            "configInput": JSON.stringify({
                "type": "page",
                "body": {
                    "type": "form",
                    "title": "用户信息",
                    "body": [
                        {
                            "type": "input-text",
                            "name": "name",
                            "label": "姓名",
                            "required": true
                        },
                        {
                            "type": "input-email",
                            "name": "email",
                            "label": "邮箱"
                        }
                    ]
                }
            }, null, 2)
        },
        "onMount": "renderAMIS",
        "actions": {
            "renderAMIS": {
                "actionType": "custom",
                "script": "try { const config = JSON.parse(this.configInput); this.preview = config; } catch (error) { this.preview = { error: error.message }; }"
            }
        }
    };

     const renderAMIS = () => {
        try {
         let amis = amisRequire('amis/embed');
         let amisScoped = amis.embed('#root', amisJSON);
        } catch (error) {
          preview.innerHTML = `<div style="color: red;">JSON 错误: ${error.message}</div>`;
        }
      };

      // 初始化渲染
      renderAMIS();
</script>
</html>